<template>
  <a-modal
    :maskClosable="maskClosable"
    title="监控详情"
    :width="600"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    :okButtonProps="{ class: { 'jee-hidden': true } }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-table
      ref="table"
      rowKey="meter"
      size="middle"
      :pagination="false"
      :columns="columns"
      :dataSource="gDataSource"
    >
      <span slot="meter" slot-scope="text, record">
        {{ meterCnMap[record.meter] }}
      </span>
    </a-table>
  </a-modal>
</template>
<script>
import { GwListMixin } from "@/mixins/GwListMixin";
import { gPostAction } from "@/api/manage";

export default {
  name: "DetailModal",
  mixins: [GwListMixin],
  data() {
    return {
      visible: false,
      confirmLoading: false,
      model: {},
      columns: [
        {
          title: "监控项",
          dataIndex: "meter",
          scopedSlots: { customRender: "meter" },
        },
        {
          title: "实时值",
          dataIndex: "volume",
          customRender: (text, record) => text ? (parseFloat(text).toFixed(2) + " " + record.unit) : '',
        },
      ],
      url: {
        list: "/statistics/latestSamples",
      },
      meterCnMap: {
        "environment.air_in_temperature": "空调回风温度",
        "environment.air_out_temperature": "空调出风温度",
        "environment.air_setting_temperature": "空调设定温度",
        "environment.air_in_humidity": "空调回风湿度",
        "environment.air_out_humidity": "空调出风湿度",
        "environment.air_out_wind": "空调送风量",
        "environment.air_in_wind": "空调回风量",
        "environment.distribution_box_voltage": "配电箱实时电压",
        "environment.distribution_box_electron": "配电箱实时电流",
        "environment.distribution_box_power": "配电箱有功功率",
        "environment.distribution_box_energy": "配电箱有功电能",
        "environment.ups_in_voltage": "UPS输入电压",
        "environment.ups_out_voltage": "UPS输出电压",
        "environment.ups_in_frequency": "UPS输入频率",
        "environment.ups_out_frequency": "UPS输出频率",
        "environment.ups_temperature": "UPS温度",
        "environment.ups_battery_voltage": "UPS电池电压",
      },
      typeMap: {
        1: "environment.air",
        2: "environment.ups",
        8: "environment.distribution",
      },
      maskClosable: false,
    };
  },
  methods: {
    showModal(record) {
      this.model = Object.assign({}, record);
      this.visible = true;
      this.gDataSource = []
      this.gPagination.total = 0
      this.gPagination.current = 1
      this.loadData();
    },
    loadData() {
      this.gQueryParam.resourceId = this.model.datacenterId;
      this.gQueryParam.title = "精确管控与供电制冷联动-基础资源细粒度感知-指标监控";
      this.gQueryParam.meter = this.typeMap[this.model.type];
      gPostAction(this.url.list, this.gQueryParam).then(
        (res) => {
          const data = res.data;
          if (data) {
            this.gDataSource = data;
            this.gPagination.total = data.totalCount;
          }
        }
      );
    },
    handleOk(e) {
      this.ModalText = "The modal will be closed after two seconds";
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel(e) {
      this.visible = false;
    },
  },
};
</script>
